﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>营销地图</title>
    <link href="~/Content/Map/css/index.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="~/Content/Map/js/layer/skin/layer.css" />    
</head>
<body>
    <div class="container">
        <div class="tool">
            <div class="tool-select">
                <select name="year" id="year">
                    @for (int i = 2010; i <= 2020; i++)
                    {
                        if (i == 2015)
                        {
                            <option value="@i" selected="selected">@i</option>
                        }
                        else
                        {
                            <option value="@i">@i</option>
                        }

                    }                   
                </select>
            </div>
            <div class="tool-btn">
                <a class="active">需求分析</a>
                <a href="javascript:void(0)">供给分析</a>
                <a href="javascript:void(0)">终端分析</a>
                <a href="javascript:void(0)">流向分析</a>
                <a href="javascript:void(0)" onclick="chinaMapPart.sellNetwork()">销售网点</a>
            </div>
        </div>
        <div class="marketMapBox" style="height: 700px" id="imgMapContainer" hidden="hidden">
            <img src="/img/map.png" alt="区域地图" />
        </div>
        <div class="marketMapBox" style="height: 700px" id="main">

        </div>
    </div>
    <!--弹出框行业分析-->
    <div class="HistogramBox">
        <div id="Histogram"></div>
        <div class="more">
            <a href="#" id="all">查看更多>></a>
        </div>
    </div>
    <!--弹出框品种分析-->
    <div class="IndustryPop">
        <div style="margin: 10px 0px -13px;">
            <span style="background-color: #fff;font-size:20px;margin:0 5px 0 20px">总量:</span>
            <span style="font-size:15px;color:red;" id="prodWt"></span><span style="color:#999;font-size: 15px;color:red;" id="prodCom">(万吨)</span>
        </div>
        <div class="tbaleBox">
           
            <table cellspacing="0" cellpadding="0" class="IndustryPopTable" >
                <thead>
                    <tr>
                        <th >序号</th>
                        <th>品种</th>
                        <th>数量(万吨)</th>
                    </tr>
                </thead>
                <tbody>                                                           
                </tbody>

            </table>
        </div>
        
    </div>

    @*弹出行业分析*@
    <div class="Prod">
        <div style="margin: 10px 0px -13px;">
            <span style="background-color: #fff;font-size:20px;margin:0 5px 0 20px">总量:</span>
            <span style="font-size:15px;color:red;" id="industryWt"></span><span style="color:#999;font-size: 15px;color:red;" id="industryCom">(万吨)</span>
        </div>
        <div class="tbaleBox">
            <table cellspacing="0" cellpadding="0" class="IndustryPopTable">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>行业</th>
                        <th>数量(万吨)</th>
                    </tr>
                </thead>
                <tbody></tbody>

            </table>
        </div>
    </div>
    @*弹出终端用户*@
    <div class="user" id="user">
        <input type="hidden" id="prod"/>
        <input type="hidden" id="industry"/>
        <div style="margin: 10px 0px -13px;">
            <span style="background-color: #fff;font-size:20px;margin:0 5px 0 20px">总量:</span>
            <span style="font-size:15px;color:red;" id="userWt"></span><span style="color:#999;font-size: 15px;color:red;" id="userCom">(吨)</span>
        </div>
        <div class="tbaleBox">
            <table cellspacing="0" cellpadding="0" class="IndustryPopTable">
                <thead>
                    <tr>
                        <th style="width:60px">序号</th>
                        <th>终端用户</th>
                        <th style="width:90px">数量(吨)</th>
                    </tr>
                </thead>
                <tbody></tbody>

            </table>

        </div>
    </div>
    @*弹出钢厂分析*@
    <div class="user" id="Steel">
        <input type="hidden" id="area" />
        <input type="hidden" id="areaType"/>
        <input type="hidden" id="steelProd"/>
        <div style="margin: 10px 0px -13px;">
            <span style="background-color: #fff;font-size:20px;margin:0 5px 0 20px">总量:</span>
            <span style="font-size:15px; color:red" id="steelWt"></span><span style="color:red;font-size: 15px;" id="steelCom">(万吨)</span>
            <span style="background-color: #fff;font-size:15px;margin:0 5px 0 50px">钢厂所在地:</span>
            <select style="width:100px;" id="type" onchange="chinaMapPart.createSteelFactory()">
                <option value="0">全部</option>
                <option value="1">省内</option>
                <option value="2">省外</option>
            </select>
        </div>
        <div class="tbaleBox">
            <table cellspacing="0" cellpadding="0" class="IndustryPopTable">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>钢厂</th>
                        <th>数量(万吨)</th>
                    </tr>
                </thead>
                <tbody></tbody>

            </table>
        </div>
    </div>
    <input type="hidden" id="area"/>
    <input type="hidden" id="areaType" />
</body>
</html>
<script src="~/Content/Map/js/jquery.min.js"></script>
<script src="~/Content/Map/js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Content/Map/js/echarts.min.js"></script>
<script type="text/javascript" src="~/Content/Map/js/chinaMapPart.js"></script>
<script type="text/javascript">
   
    $(function () {
        $(".tool-btn a").click(function () {
            $(this).addClass("active");
            $(this).siblings().removeClass("active");
            var text = $(".active").text();
            if(text!="销售网点")
            {              
                chinaMapPart.init();
            }
        });
        $("#all").click(function () {
            var area = $("#area").val();
            var areaType = $("#areaType").val();
            chinaMapPart.careateUserAll(area,areaType);
        });
    });
</script>